<script setup lang="ts">
import { computed } from 'vue'
const emit = defineEmits(['itemClick', 'moreClick'])
const props = defineProps<{
  title?: string
  icon?: string
  badge?: string
  type?: 'card' | 'list'
  datePosition?: 'right' | 'bottom'
  newsList?: Array<{ id: number, title: string, date: string, link: string }>
}>()
const datePos = computed(() => props.datePosition || 'right')

function handleItemClick(item) {
  emit('itemClick', item)
}
function handleMoreClick() {
  emit('moreClick')
}
</script>

<template>
  <div class="app-card" :class="[type, 'date-' + datePos]">
    <template v-if="type === 'card' || !type">
      <div class="card-header">
        <div class="card-icon" v-if="icon">
          <Icon :name="icon" />
        </div>
        <div class="card-title">{{ title }}</div>
      </div>
      <div class="card-content">
        <slot />
      </div>
      <div class="card-footer">
        <a @click.prevent="handleMoreClick" href="#" class="card-link">了解详情 <span class="arrow">›</span></a>
      </div>
    </template>
    <template v-else>
      <div class="list-header">
        <div class="list-title">{{ title }}</div>
        <div class="list-right"></div>
      </div>
      <ul class="list-content">
        <li :style="{lineHeight: datePosition === 'right' ? '33px' : '10px'}" v-for="item in props.newsList" :key="item.id">
<!--          <span class="list-dot"></span>-->
          <div style="cursor: pointer;" :title="item.title" class="list-title" :href="item.link" target="_blank" @click.prevent="handleItemClick(item)">
            {{ item.title }}
          </div>
          <span class="list-date">{{ item.date }}</span>
        </li>
      </ul>
      <div class="list-footer">
        <a class="list-link" @click.prevent="handleMoreClick">查看更多 <span class="arrow">›</span></a>
      </div>
    </template>
  </div>
</template>

<style scoped lang="less">
.app-card {
  background: #fff;
  border-radius: 8px 8px, 0px, 0px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(31, 56, 88, 0.06);
  padding: 0px 0px 18px 0px;
  display: flex;
  flex-direction: column;
  position: relative;
  .card-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 16px;
    @media (max-width: 900px) {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .card-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fdeced;
      border-radius: 8px;
      font-size: 22px;
      color: #b8393f;
      margin-right: 12px;
      flex-shrink: 0;
    }
    .card-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0px;
      color: rgba(63, 69, 82, 1);
      text-align: left;
      vertical-align: top;
      color: #222;
      line-height: 48px;
      flex: 1;
    }
  }
  .card-content {
    text-indent: 2em;
    text-align: justify;
    height: 404px;
    display: -webkit-box;
    -webkit-line-clamp: 13;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #3d609a;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
    letter-spacing: 0px;
    margin-bottom: 0;
    box-sizing: border-box;
    padding: 0 24px;
  }
  .card-footer {
    padding: 24px 24px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .card-link {
      color: #3d609a;
      font-size: 15px;
      text-decoration: none;
      display: flex;
      align-items: center;
      transition: color 0.2s;
      &:hover {
        color: #b8393f;
        text-decoration: underline;
      }
      .arrow {
        font-size: 18px;
        margin-left: 2px;
        font-family: Arial, sans-serif;
      }
    }
  }
  &.list {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px 0 rgba(31, 56, 88, 0.06);

    min-width: 260px;
    max-width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    .list-header {
      @media screen and (max-width: 900px) {
        display: flex;
        align-items: center;
        height: 28px;
      }

      display: flex;
      .list-right{
        flex: 1;
      }

      .list-title {
        @media(max-width: 900px) {
            font-size: 14px;
            width: 100px;
            height: 28px;
           line-height: 28px;
        }
        text-align: center;
        width: 144px;
        height: 48px;
        overflow: hidden;
        border-radius: 8px 8px, 0px, 0px;
        background: linear-gradient(180deg, #F0DFE0 0%, #FFFFFF 99.9%);
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 48px;
        color: rgba(184, 57, 63, 1);
        vertical-align: top;
      }
    }
    .list-content {
      list-style: none;
      margin: 0;
      padding: 0 24px;
      flex: 1;
      li {
        @media (max-width: 900px) {
          max-width: 100vw;
        }
        max-width: 1000px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        color: #3d609a;
        border-bottom: 1px dashed #e6e6e6;
        padding: 12px 0;
        line-height: 20px;
        &:last-child {
          border-bottom: none;
        }
        .list-dot {
          color: #b8393f;
          font-size: 12px;
          margin-right: 8px;
        }
        .list-title {
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 24.7px;
          color: rgba(61, 96, 154, 1);
          text-align: left;
          vertical-align: top;
        }
        .list-date {
          font-size: 18px;
          color: #bcbcbc;
          white-space: nowrap;
        }
      }
    }
    .list-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 24px 16px 24px;
     
      .list-link {
        @media screen and (max-width: 900px) {
        font-size: 14px!important;
      }
        color: #3d609a;
        font-size: 15px;
        text-decoration: none;
        display: flex;
        align-items: center;
        transition: color 0.2s;
        &:hover {
          color: #b8393f;
          text-decoration: underline;
        }
        .arrow {
          @media screen and (max-width: 900px) {
        font-size: 14px!important;
      }
          font-size: 18px;
          margin-left: 2px;
          font-family: Arial, sans-serif;
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .app-card {
    padding: 16px 10px 12px 10px;
    min-width: 0;
    max-width: 100%;
    .card-header {

      .card-title {
        font-size: 16px;
      }
      .card-icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
        margin-right: 8px;
      }
    }
    .card-content {
      font-size: 13px;
    }
    .card-footer {
      margin-top: 10px;
      .card-link {
        font-size: 14px;
        .arrow {
          font-size: 16px;
        }
      }
    }
  }
  .app-card .list-content li .list-title {

    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 24.7px;
    color: rgba(61, 96, 154, 1);
    text-align: left;
    vertical-align: top;
  }
}
.app-card.list.date-bottom {
  .list-content li {
    flex-direction: column;
    align-items: flex-start;

    .list-title {
      margin-bottom: 2px;
      width: 466px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .list-date {
      @media screen and (max-width: 900px) {
            font-size: 14px;
          }
      display: block;
      width: 100%;
      margin-left: 0;
      margin-top: 2px;
      font-size: 14px;
      color: #bcbcbc;
      text-align: left;
    }
  }
}
.app-card.list.date-right {
  .list-content li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .list-title {
      flex: 1;
      text-align: left;
      margin-right: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .list-date {
      margin-left: 8px;
      text-align: right;
      white-space: nowrap;
    }
  }
}


@media (max-width: 900px) {
  .app-card.list.date-bottom .list-content li {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
    padding: 8px 0 4px 0;
    .list-title {
      display: block;
      font-size: 14px;
      line-height: 24.7px;
      font-weight: 500;
      color: rgba(61, 96, 154, 1);
      margin-right: 0;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .list-date {
      display: block;
      width: 100%;
      margin-left: 0;
      margin-top: 2px;
      font-size: 14px;
      color: #bcbcbc;
      text-align: left;
      font-weight: 400;
    }
  }
  .app-card.list.date-right .list-content li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 0 4px 0;
  }
  .app-card.list.date-right .list-content li .list-title {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 70%;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    margin-right: 12px;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .app-card.list.date-right .list-content li .list-date {
    margin-left: 8px;
    text-align: right;
    white-space: nowrap;
    font-size: 14px;
    color: #bcbcbc;
    display: inline-block;
    width: auto;
    margin-top: 0;
    flex-shrink: 0;
  }
}
</style>